<script>

export default {
    name: "ArticleCard",
    data() {
        return {}
    },

    props: {
        index:0,
        value: {
            type: Object,
            default() {
                return {
                    title: '我的系统',
                    banner: 'http://res.codeblog.space:8888/group2/M00/00/00/wKh-aWG65QeAZXuHAABFNjHMvq461.webp',
                    summary: 'HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时',
                    createTime: '2021-12-16',
                    tag: '11,232,222',
                }
            }
        }
    },
    methods: {
        editBlog(){
            this.$router.push({path:"/mdeditor", query:{id:this.value.id}})
        },
        parseTag(tag){
            return JSON.parse(tag)
        }
    },
    mounted() {
    }
}
</script>

<template>
    <div style="width: 100%;margin: 7px 0;height: 150px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);border-radius: 10px"  class="flex column flex-start align-center">
        <div class="flex row align-center flex-start" style="height: 150px;width: 100%;">
            <div style="margin-right: 10px">
                <img style="height: 120px;border-radius: 10px" :src="value.banner" alt="">
            </div>
            <div class="flex column flex-start" style="width: 100%">
                <div class="flex space-between align-center  row " style="width: 100%">
                    <router-link :to="'/article/detail/'+value.id" style="width: 100%;" class="title">{{ value.title }}</router-link>
                    <el-tag size="small" type="success" effect="plain" v-for="(item,i) in parseTag(value.tag)" :key="i">{{item}}</el-tag>
                </div>

                <span style="width: 80%" class="sumFont" >{{ value.summary }}</span>
            </div>
        </div>
        <div class="flex align-center space-between" style="width: 100%;height: 30px">
            <div>
                <span style="" class="dateFont">查看:{{ value.viewCount }}</span>
                <span class="circlePoint"></span>
                <span style="" class="dateFont">点赞:{{ value.favourCount }}</span>
                <span class="circlePoint"></span>
                <span style="" class="dateFont">收藏:{{ value.collectCount }}</span>
                <span class="circlePoint"></span>
                <span style="" class="dateFont">评论:{{ value.commentCount }}</span>
                <span class="circlePoint"></span>
                <span style="" class="dateFont">发布时间:{{ value.createTime }}</span>
            </div>
        </div>

    </div>
</template>

<style scoped>
.sumFont {
    line-height: 20px;
    color: #999aaa;
    font-weight: 400;
    font-size: 14px;
    min-height: 40px;
    display: flex;
    align-items: center;
}
.circlePoint{
    margin: 0 5px;
    display: inline-block;
    width: 3px;
    height: 3px;
    background: #555666;
    vertical-align: middle;
    border-radius: 50%;
}

.dateFont {
    color: #999aaa;
    font-weight: 400;
    font-size: 14px;
}

.title {
    line-height: 23px;
    font-size: 14pt;
    color: #555666;
    font-weight: 500;
}
</style>
